<template>
  <!-- 咨询单置顶记录-->
  <div>
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">咨询单置顶记录</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="main">
      <!-- 搜索 -->
      <div class="search">
        <div class="left_search">
          <el-input placeholder="请输入商品名称" class="inp ml10"></el-input>

          <el-select v-model="value" placeholder="所属行业">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select v-model="value" class="ml10" placeholder="审核状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select v-model="value" class="mr10" placeholder="产品分类">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-button type="primary" :icon="Search" class="btn">查询</el-button>
          <el-button type="danger" class="btn" style="background: #ff4848"
            >全部删除</el-button
          >
        </div>

        <div class="right_search">
          <el-checkbox v-model="checked" style="margin: 0 10px"
            >全选</el-checkbox
          >
          <el-button type="danger" class="btn" style="background: #ff4848"
            >删除</el-button
          >
          <el-button type="primary" class="btn mr10">主站置顶</el-button>
        </div>
      </div>

      <!-- 表格内容 -->
      <div class="table">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          stripe
          :header-cell-style="{ background: '#ECF4FF', color: '#333' }"
        >
          <el-table-column type="selection" width="44" />

          <el-table-column label="商品名称" align="center" width="500">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            property="name"
            label="商品分类"
            align="center"
            width="500"
          />
          <el-table-column
            property="address"
            label="咨询时间"
            sortable
            show-overflow-tooltip
            align="center"
            width="300"
          />

          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" align="center">
            <template #default>
              <el-button link type="primary" @click="detail()"
                >查看详情</el-button
              >
              <el-button link type="danger" @click="prevent()">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="Pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[1, 2, 3, 4]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import top from "../../../components/top/top.vue";
// icon
import { Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
//表格内容
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "1",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "2",
  },
];

// 全选
const multipleSelection = ref([]);
const checked = ref(true);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 搜索
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
];

// 跳转详情
const detail = () => {
  router.push("/consultDetail");
};
// 删除
const prevent = () => {};

// 分页
const currentPage = ref(5);
const pageSize = ref(100);
const small = ref(false);
const disabled = ref(false);
const background = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
// 表格
.main {
  // width: 1610px;
  height: 760px;
  background: #ffffff;
  margin: 10px 0 0 10px;

  // 搜索
  .search {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .table {
    margin: 0 10px;
  }
}

// 分页
.Pagination {
  margin-top: 20px;
}
</style>
